<template>
  <div>
    <Form
      class="create-derivative-form"
      :ref="formRef"
      :model="basedataForm"
      :rules="basedataFormRules"
      label-position="left"
      :label-width="100"
      >
      <FormItem label="数据名称" prop="dataName">
        <Input v-model="basedataForm.dataName" placeholder="请输入数据名称"></Input>
      </FormItem>
      <FormItem label="数据编码" prop="dataCode">
        <Input v-model="basedataForm.dataCode" placeholder="请输入数据编码" :disabled="codeDisabled"></Input>
      </FormItem>
      <FormItem label="数据类型" prop="dataClass">
        <Select v-model="basedataForm.dataClass">
          <Option v-for="item in dataClassDict" :key="item.dictKey" :value="item.dictKey">{{ item.dictName }}</Option>
        </Select>
      </FormItem>
      <FormItem label="数据长度" prop="dataLength">
        <Input v-model="basedataForm.dataLength" placeholder="请输入数据长度"></Input>
      </FormItem>
      <FormItem label="数据分类" prop="dataTypeIdList">
        <Cascader
          :data="dataTypeDict"
          v-model="basedataForm.dataTypeIdList"
          change-on-select
          @on-change="changeTypeList"></Cascader>
      </FormItem>
      <FormItem v-if="haveFileFlag" label="文件">
        <Upload
          class="sampleset-upload-box"
          multiple
          action=""
          :before-upload="getUploadData">
          <Button>选择</Button>
        </Upload>
      </FormItem>
    </Form>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'base_form',
  props: {
    // 是否有上传文件标识
    haveFileFlag: {
      type: Boolean,
      default: false
    },
    // 表单ref
    formRef: {
      type: String,
      default: ''
    },
    // 数据类型字典
    classDict: {
      type: Array
    },
    // 数据分类字典
    typeDict: {
      type: Array
    },
    formData: {
      type: Object
    },
    tableData: {
      type: Array
    },
    codeDisabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    // 数据编码表单验证
    const validateDataCode = (rule, value, callback) => {
      console.log('----value', value)
      if (value === '') {
        callback(new Error('数据编码不能为空'))
      } else if (!/^[a-z|A-Z][a-z|A-Z|_|0-9]*$/.test(value)) {
        callback(new Error('数据编码只能以字母开头，包含字母、数字、下划线'))
      } else {
        // 若为编辑则 自身之外的dataCode重复验证
        const filterTableData = this.formRef === 'editBaseForm' ? this.saveTableData.filter(item => item.dataCode !== this.formData.dataCode) : this.saveTableData
        if (filterTableData.findIndex(item => item.dataCode === value) > -1) {
          callback(new Error('数据编码已存在'))
        }
        callback()
      }
    }

    // 数据长度表单验证
    const validateDataLength = (rule, value, callback) => {
      if (value.length < 1) {
        callback(new Error('数据长度不能为空'))
      } else {
        if (!/(^\d+$)/i.test(value)) {
          callback(new Error('数据长度只能为数字'))
        }
      }
      callback()
    }

    return {
      uploadFile: null,
      basedataForm: {
        dataName: '',
        dataCode: '',
        dataClass: '',
        dataLength: '',
        dataTypeIdList: [], // 数据分类级联绑定数据
        dataTypeId: '', // 数据分类最后一级id
        dataTypeName: ''
      },
      basedataFormRules: {
        dataName: [{
          required: true,
          message: '数据名称不能为空',
          trigger: 'blur'
        }],
        dataCode: [{
          required: true,
          trigger: 'blur',
          validator: validateDataCode
        }],
        dataClass: [{
          required: true,
          type: 'string',
          message: '数据类型不能为空',
          trigger: 'change'
        }],
        dataLength: [{
          required: true,
          trigger: 'blur',
          validator: validateDataLength
        }],
        dataTypeIdList: [{
          required: true,
          message: '数据分类不能为空',
          trigger: 'change',
          type: 'array'
        }]
      }
    }
  },
  computed: {
    // 输入输出数据集合
    saveTableData () {
      return this.tableData
    },
    // 数据类型
    dataClassDict () {
      return this.classDict
    },
    // 数据分类
    dataTypeDict () {
      return this.typeDict
    }
  },
  watch: {
    formData (newValue) {
      this.basedataForm = JSON.parse(JSON.stringify(newValue))
    }
  },
  methods: {
    // 改变数据分类事件
    changeTypeList (value, selectedData) {
      this.basedataForm.dataTypeName = selectedData.length ? selectedData[selectedData.length - 1].dictName : ''
    },
    getUploadData (file) {
      this.uploadFile = file
      return false
    }
  },
  activated () {
  },
  mounted () {
  }
}
</script>

<style>

</style>
